<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<link rel="stylesheet" href="css/villa/villa.css">
<link rel="stylesheet" href="css/villa/lunbo.css">

<body>
    <div class="dt">
        <div style="width: 100%;height: 800px;">
            <p style="font-family:'楷体';display: none;">
                <b>要查询的地址：</b><input id="text_" type="text" value="广东省珠海市斗门区白蕉南路29号" style="margin:0;padding:10px 0;border:1px solid rgb(180, 180, 180);border-radius:8px;width:250px;height:10px;font-size:16px;text-align:center;" />
                <input type="button" value="查询" onclick="searchByStationName();" style="width:85px;height:23px;border-color:#ccc;border-radius:25px;" />
            </p>
            <p style="font-family:'楷体';display: none;">查询结果(经纬度)：<input id="result_" type="text" style="border:0;" /></p>
            <center>
                <div id="container" style="position: absolute;width:100%;height:800px;border: 1px solid gray;overflow:hidden;">
                </div>
            </center>
        </div>
    </div>

    <!-- 地图 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO&v=2.0&services=false"></script>

    <script type="text/javascript">
        var map = new BMap.Map("container");
        map.centerAndZoom("广东省珠海市斗门区白蕉南路29号", 20);
        map.enableScrollWheelZoom();
        map.enableContinuousZoom();

        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.OverviewMapControl());
        map.addControl(new BMap.OverviewMapControl({
            isOpen: true,
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT
        }));

        var localSearch = new BMap.LocalSearch(map);
        localSearch.enableAutoViewport();

        window.onload = function() {
            map.clearOverlays();
            var keyword = document.getElementById("text_").value;
            localSearch.setSearchCompleteCallback(function(searchResult) {
                var poi = searchResult.getPoi(0);
                document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
                map.centerAndZoom(poi.point, 13);
                var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));
                map.addOverlay(marker);
                var content = document.getElementById("text_").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
                var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
                marker.addEventListener("click", function() {
                    this.openInfoWindow(infoWindow);
                });
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            });
            localSearch.search(keyword);
        }
    </script>
</body>

</html>